<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <title>激光码管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="查询订单号">
            <el-input v-model="formInline.id" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="StartSelect">查询</el-button>
        </el-form-item>
    </el-form>

    <template>
        <el-table
                :data="jgms"
                style="width: 100% ;height: 450px"
                @selection-change="handleSelectionChange"
                >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.productName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易金额"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.money }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易时间"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="所属分类"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.productEnterprise }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="数量"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.number }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="激光码"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.laserCode==1?"已生成":"未生成"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="doFP(scope.$index, scope.row)">分配打印</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button
                size="mini"
                @click="addJgm">生成激光码</el-button>
        <el-button
                size="mini"
                @click="deleteSome">批量删除</el-button>
        <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="pageUp">上一页</el-button>
            <el-button type="primary" size="mini" @click="pageDown">下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
        </el-button-group>

    </template>
    <!--用于修改，添加的对话框，在不需要时设置样式隐藏-->
    <!--<el-dialog title="用户操作" :visible.sync="dialogFormVisible " @close="closeMyDialog">
        <el-form  :model="jgm" >

            <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="jgm.orderId" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveJgm">提交</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>-->

    <!--用于显示查询结果-->
    <el-drawer
            :visible.sync="table"
            direction="rtl"
            size="40%">
        <el-table :data="gridData">
            <el-table-column property="orderId" label="订单编号" width="70"></el-table-column>
            <el-table-column property="productName" label="产品名称" width="70"></el-table-column>
            <el-table-column property="money" label="交易金额" width="70"></el-table-column>
            <el-table-column property="dealTime" label="交易时间" width="70"></el-table-column>
            <el-table-column property="productEnterprise" label="所属分类" width="70"></el-table-column>
            <el-table-column property="number" label="数量" width="70"></el-table-column>\
            <el-table-column property="laserCode" label="激光码" width="70"></el-table-column>
        </el-table>
    </el-drawer>


</div>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>

    new Vue({
        el:"#app",
        data(){
            return{
                jgms:null,
                total:0,//总条数
                current:1,//当前页数
                pageNum:1,//总页数
                dialogFormVisible:false,//弹出层
                jgm:{
                    orderId:'',
                    productName:'',
                    money:'',
                    dealTime:'',
                    productEnterprise:'',
                    number:'',
                    lstatus:'',
                    id:'',
                    lno:'',
                    lcode:'',
                    lprinetr:'',
                    lserial:'',
                    companyId:'',
                    laserCode:'',
                    productPlanTime:'',
                    productPlanOvertime:''
                },
                formInline: {
                    id: '',
                },
                //表格被选中的内容
                tableSelections:[],
                //查询后弹出层
                table: false,
                gridData: [{
                    orderId:'',
                    productName:'',
                    money:'',
                    dealTime:'',
                    productEnterprise:'',
                    number:'',
                    lstatus:'',
                }],

                formLabelWidth:'120px'
            }
        },
        mounted(){
            this.loadPage(1);
        },
        methods:{

            loadPage(current){
                this.current=current;
                //加载打印机
                axios.get("/jgms/"+current).then(value => {
                    if (value.data.code=='1'){
                        console.log("加载激光码成功！")
                        console.log(value.data.data.records)
                        this.jgms=value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        /*this.pageSize = value.data.data.pageSize;*/
                        console.log("===加载激光码成功后，输出激光码内容为:===")
                        console.log(this.jgms)
                        this.loadpageNum();
                    }
                })
            },
            //查询页码
            loadpageNum(){
                this.pageNum=(this.total)%5==0?(this.total)/5:Math.trunc((this.total)/5)+1
                console.log("当前页面"+this.current)
                console.log("本次查询总页数:"+this.pageNum)
            },
            pageUp(){
                this.loadpageNum();
                if (this.current > 1){
                    this.current=this.current-1;
                }else {
                    this.error3()
                }
                this.loadPage(this.current)
            },
            pageDown(){
                this.loadpageNum();
                if (this.pageNum > this.current){
                    this.current=this.current+1;
                }else {
                    this.error4()
                }
                this.loadPage(this.current)
            },
            StartSelect() {
                if(this.formInline.id.replace(/(^\s*)|(\s*$)/g, '')==''){
                    this.error1()
                }else {
                console.log(this.formInline.id);
                axios.get("/selectJgm/"+this.formInline.id)
                    .then(value => {
                        if (value.data.code==1){
                            this.gridData[0]=value.data.data;
                            if (this.gridData[0]==null){
                                //alert("未查询到任何信息,请检查订单号是否正确...")
                                this.error2();
                            }else {
                            console.log("查询订单号成功！")
                            console.log("gridData[0]---->")
                            console.log(this.gridData[0])
                            //给显示的状态赋别值
                            if (this.gridData[0].laserCode==1){
                                this.gridData[0].laserCode="已生成"
                            }else {
                                this.gridData[0].laserCode="未生成"
                            }
                            this.table=true;
                        }}
                    })}
            },
            handleSelectionChange(val) {
                console.log("选中行:")
                console.log("当前被选中:")
                this.tableSelections=val
                console.log(this.tableSelections)
            },
            /*任务分配*/
            doFP(index,row){
                console.log("=====doFP=====")
                console.log(index)
                console.log(row)
                if (row.laserCode!=1){
                    this.error7()
                }else {
                    location.href="/maxuejiao/sc_fp.html"
                }
            },
            error1() {
                this.$message.error('无效操作,因为没有键入内容...');
            },
            error2() {
                this.$message.error('未查询到任何信息,请检查订单号是否正确...');
            },
            error3() {
                this.$message.error('当前页已是第一页...');
            },
            error4() {
                this.$message.error('已经是最后一页了...');
            },
            error5() {
                this.$message.error('无效操作,没有数据被选择...');
            },
            error6() {
                this.$message.error('生成失败,因为选择已生成数据...');
            },
            error7() {
                this.$message.error('该订单未生成激光码,无法打印')
            },
            addSuccess() {
                this.$message({
                    message: '添加激光码成功',
                    type: 'success'
                });
            },
            deleteSome(){
                if (this.tableSelections!=''){
                    console.log("执行批量删除")
                    this.deleteSure();
                }else {
                    //alert("无效操作,没有数据被选择!")
                    this.error5()
                }
            },
            //分批删除前确认
            deleteSure() {
                this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    axios.post("/jgmDel",this.tableSelections)
                        .then(value => {
                            if (value.data.code=='1'){
                                this.loadpageNum();
                                this.loadPage(this.current);
                            }
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addJgm(){
                var isOk=true;
                console.log("======addJgm======")
                console.log(this.tableSelections)
                if (this.tableSelections==''){
                    this.error5()
                }else {
                    this.tableSelections.forEach((v,i)=>{
                        //i:下标
                        if (this.tableSelections[i].laserCode==1){
                            isOk=false
                        }
                    })
                    if (isOk==false){
                        this.error6()
                    }else {
                        axios.post("/jgmSc",this.tableSelections)
                            .then(value => {
                                if (value.data.code=='1'){
                                    this.loadpageNum();
                                    this.loadPage(this.current);
                                    this.addSuccess()
                                }
                            })
                    }
                }
            }
        }
    })

</script>

</body>
</html>